<template>
  <div id="app" style="height: 100%;">
    <transition :name="viewTransition" :css="!!direction">
      <navigation>
        <router-view class="router-view"></router-view>
      </navigation>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState({
      route: (state) => state.route,
      direction: (state) => state.navigator.direction,
    }),
    viewTransition() {
      if (!this.direction) return '';
      return 'rt-pop-' + (this.direction === 'forward' ? 'in' : 'out');
    },
  },
  mounted() {
    this.getUser();
  },
  created() {},
  methods:{
    setHeader() {
        rt.setRequestInterceptors(config => {
          let user = this.$store.state.user;
          let userInfo = {
            userCode: user.userCode,
            userId: user.userId,
            userName: user.userName,
            nickName: user.nickName
          };
          config.headers.User = rt.getEncryption(encodeURI(JSON.stringify(userInfo)));
          return config;
        });
    },
    getUser() {
      if (window.DeviceData) {
        //获取手机端登录的用户信息
        let userStr = window.DeviceData.GetUserInfo();
        let reg = /\\/g;
        let replaceAfter = rt.isiOS()?userStr.replace(reg,'\\\\'):userStr;
        if (replaceAfter && !rt.isNullOrWhiteSpace(replaceAfter) && replaceAfter !== "null") {
          let user = JSON.parse(replaceAfter);
          this.updateContactUser(user);
        }
      }
    },
    updateContactUser(user) {
      //用户实体
      let userInfo = {
        bbs_account_code: user.tenant_code,
        code: user.code,
        // nickname: user.name,
        bbs_account_name: user.tenant_name,
        name: user.name,
        mobilephone: user.mobilephone,
        sex: user.sex,
        birthday: user.birthday,
        email: user.email,
        idcard: user.idcard,
        position: user.position,
        avatar: user.avatar
      };
      rt.post('/api/bbs/contact/saveorupdatecontact', userInfo)
        .then((res) => {
          //res 返回的是联系人数据
          if (res) {
            this.updateUser(res,userInfo);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updateUser(user,userMsg) {
      let userInfo = {
        userId: user.bbs_contactid,
        userCode: user.code,
        userName: user.name,
        nickName: user.nickname,
        telephone: user.mobilephone,
        email: user.email,
        avatarBase64: userMsg.avatar
      };
      this.$store.commit('UPDATE_USER', userInfo);
      let authInfo = {
        accessToken: rt.getAccessToken(),
        refreshToken: rt.getRefreshToken(),
        tenantCode: user.bbs_account_code,
      };
      this.$store.commit('UPDATE_AUTH', authInfo);
      this.setHeader();
    }
  }
};
</script>

<style lang="less">
@import '~vue-xmobile/src/style/index';
@import './assets/styles/index.less';
html {
  height: 100%;
  overflow-x: hidden;
  // -webkit-overflow-scrolling: touch;
}
body {
  height: 100%;
  background-color: #fbf9fe;
  overflow-x: hidden;
}

.router-view {
  width: 100%;
  height: 100%;
}

.rt-pop-out-enter-active,
.rt-pop-out-leave-active,
.rt-pop-in-enter-active,
.rt-pop-in-leave-active {
  will-change: transform;
  transition: all 350ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}

.rt-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.rt-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.rt-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.rt-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
